<template>
  <div class="component-root-container">
    <el-header>
      <el-form ref="contractRule" :rules="contractRule" :model="headerCheck" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="requestId">
              <el-input v-model="headerCheck['requestId']" placeholder="请输入订单编号" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请变更类型:" prop="roomType">
              <el-select v-model="headerCheck['roomType']" placeholder="请选择" clearable>
                <el-option v-for="item in productTypes" :key="item.code" :value="item.code" :label="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请变更资源ID:" prop="roomId">
              <el-input v-model="headerCheck['roomId']" placeholder="请输入申请变更资源ID" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            展示信息：
            <el-checkbox v-for="option in searchOptions" v-model="searchSelected" :label="option.id" :key="option.id">{{option.label}}</el-checkbox>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;" v-show="showSence">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ query.count }}</span></div>
            <div><span>拦截比率：</span><span>{{ query.rate }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">本场景在进行集中操作机房类型信息变更审核时，将用户申请变更的机房变更类型分别与订单关联机房的AI识别的机房类型，已沉淀固化的机房类型，资源系统的机房产品类型进行对比，并将审核结果集审核不通过原因进行展示。</div>
          </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：订单编号：1116050922182500，变更内容：R2201009080019001270701，申请变更类型：RRU拉远</div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-table ref="otherTable" border :data="auditResult" class="table-bottom" v-loading="listLoading"
          element-loading-text="数据加载中...">
          <el-table-column prop="auditType" align="center" label="审核类型" width="300" show-overflow-tooltip />
          <el-table-column prop="verifyCode" align="center" label="审核结果" width="200" />
          <el-table-column prop="returnMsg" align="center" label="审核信息" />
        </el-table>
      </div>

      <div class="contentInfo" v-show="searchSelected.includes(0)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            AI识别机房信息
          </el-col>
        </el-row>
        <el-table ref="otherTable" border :data="aitableData" class="table-bottom" v-loading="listLoading"
          element-loading-text="数据加载中...">
          <el-table-column prop="resourceId" align="center" label="资源ID" show-overflow-tooltip />
          <el-table-column prop="aiProdTypeName" align="center" label="AI识别类型" />
          <el-table-column prop="prodTypeWhetherYes" align="center" label="与资源系统产品是否一致" />
          <el-table-column prop="confidenceLevel" align="center" label="可信度" />
        </el-table>
      </div>

      <div class="contentInfo" v-show="searchSelected.includes(1)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            沉淀固化机房信息
          </el-col>
        </el-row>
        <el-table ref="otherTable" border :data="solidTableData" class="table-bottom" v-loading="listLoading"
          element-loading-text="数据加载中...">
          <el-table-column prop="resourceId" align="center" label="资源ID" show-overflow-tooltip />
          <el-table-column prop="isMark" align="center" label="是否沉淀固化" show-overflow-tooltip />
          <el-table-column prop="markProductType" align="center" label="沉淀固化类型" show-overflow-tooltip />
        </el-table>
      </div>

      <div class="contentInfo" v-show="searchSelected.includes(2)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            资源系统机房信息
          </el-col>
        </el-row>
        <el-table ref="otherTable" border :data="resTableData" class="table-bottom" v-loading="listLoading"
          element-loading-text="数据加载中...">
          <el-table-column prop="resourceId" align="center" label="资源ID" show-overflow-tooltip />
          <el-table-column prop="roomId" align="center" label="CRM侧资源ID" show-overflow-tooltip />
          <el-table-column prop="resPrductType" align="center" label="产品类型" show-overflow-tooltip />
        </el-table>
      </div>

      <div class="contentInfo" v-show="searchSelected.includes(3)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            机房资产卡片信息
          </el-col>
        </el-row>
        <el-table ref="otherTable" border :data="resCardTableData" class="table-bottom" v-loading="listLoading"
          element-loading-text="数据加载中...">
          <el-table-column prop="resourceId" align="center" label="资源ID" show-overflow-tooltip />
          <el-table-column prop="assetsNo" align="center" label="卡片编码" show-overflow-tooltip />
          <el-table-column prop="stateId" align="center" label="卡片状态" width="200" show-overflow-tooltip />
          <el-table-column prop="deleteState" align="center" label="删除状态" width="200" show-overflow-tooltip />
        </el-table>
      </div>

      <div class="contentInfo" v-show="searchSelected.includes(4)">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            同站址其他订单信息
          </el-col>
        </el-row>
        <el-table ref="otherTable" border :data="netsiteTableData" class="table-bottom" v-loading="listLoading"
          element-loading-text="数据加载中...">
          <el-table-column prop="siteId" align="center" label="站址编码" show-overflow-tooltip />
          <el-table-column prop="otherRequestId" align="center" label="订单编号" show-overflow-tooltip />
          <el-table-column prop="otherRoomId" align="center" label="CRM侧机房ID" show-overflow-tooltip />
          <el-table-column prop="otherResourceId" align="center" label="资源侧机房ID" show-overflow-tooltip />
        </el-table>
      </div>

    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        listLoading: false,
        showSence: true,
        query:{
           count:0,
           rate:'--'
        },
        auditResult: [],
        aitableData: [],
        solidTableData: [],
        resTableData: [],
        resCardTableData: [],
        netsiteTableData:[],
        headerCheck: {
          requestId: '',
          roomType: '',
          roomId:''
        },
        productTypes: [{
            code: '01',
            label: '自建砖混机房'
          },
          {
            code: '02',
            label: '自建框架机房'
          },
          {
            code: '03',
            label: '自建彩钢板机房'
          },
          {
            code: '08',
            label: '一体化机房'
          },
          {
            code: '04',
            label: '一体化机柜'
          },
          {
            code: '-1',
            label: '无机房'
          },
          {
            code: '05',
            label: '租赁机房'
          },
          {
            code: '06',
            label: '其他机房'
          },
          {
            code: '07',
            label: 'RRU拉远'
          }
        ],
        searchOptions: [{
            id: 0,
            label: 'AI识别机房信息'
          },
          {
            id: 1,
            label: '沉淀固化机房信息'
          },
          {
            id: 2,
            label: '资源系统机房信息'
          },
          {
            id: 3,
            label: '机房资产卡片信息'
          },
          {
            id: 4,
            label: '同站址其他订单信息'
          }
        ],
        searchSelected: [0, 1, 2, 3,4],
        contractRule: {
          requestId: [{
            required: true,
            message: '请输入订单编号',
            trigger: 'blur'
          }],
          roomType: [{
            required: true,
            message: '请选择变更类型',
            trigger: 'blur'
          }],
          roomId: [{
            required: true,
            message: '请输入变更资源ID',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('2.11')
    },
    mounted() {},
    methods: {
      async buttonClick() {
        this.listLoading = true
        try {
          this.auditResult = []
          this.aitableData = []
          this.solidTableData = []
          this.resTableData = []
          this.resCardTableData = []
          this.netsiteTableData=[]

          await this.$refs['contractRule'].validate()
          const data = {
            requestId: this.headerCheck.requestId,
            roomType: this.headerCheck.roomType,
            roomId:this.headerCheck.roomId
          }
          const r = await this.$http({
            url: this.$http.adornBizUrl('/roomType/info/verify'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          console.log(r);
          if (r.data.data) {
            var result = r.data.data;

            this.netsiteTableData = result.roomOtherInfo||[];
            var result1 = result.roomVerifyResult;
            this.auditResult = [{
                auditType: '与AI识别机房类型对比',
                verifyCode: result1.verifyCode1 == '1' ? '审核通过' : '审核不通过',
                returnMsg: result1.returnMsg1
              },
              {
                auditType: '与沉淀固化机房类型对比',
                verifyCode: result1.verifyCode2 == '1' ? '审核通过' : '审核不通过',
                returnMsg: result1.returnMsg2
              },
              {
                auditType: '与资源系统机房类型对比',
                verifyCode: result1.verifyCode3 == '1' ? '审核通过' : '审核不通过',
                returnMsg: result1.returnMsg3
              }
            ];

            var result2 = result.roomVerifyDetails;
            console.log(result2)
            this.aitableData = [{
              roomId: result2.roomId || '--',
              resourceId:result2.resourceId||'--',
              aiProdType: result2.aiProdType,
              aiProdTypeName: result2.aiProdTypeName || '--',
              prodTypeWhetherYes: result2.prodTypeWhetherYes == '1' ? '是' : '否',
              confidenceLevel: result2.confidenceLevel || '--'
            }]
            this.solidTableData = [{
              resourceId: result2.resourceId || '--',
              isMark: result2.isMark == '1' ? '是' : '否',
              markProductType: result2.markProductType || '--'
            }]
            this.resTableData = [{
              resourceId: result2.resourceId || '--',
              roomId: result2.roomId || '未知',
              resPrductType: result2.resProductType || '--'
            }]
            this.resCardTableData = [{
              resourceId: result2.resourceId || '--',
              assetsNo: result2.assetsNo || '--',
              stateId: result2.stateId || '--',
              deleteState: result2.deleteState || '--'
            }]
          }
        } catch (e) {
          console.log(e)
          this.listLoading = false
        } finally {
          this.listLoading = false
        }
      },
      reset() {
        this.headerCheck = {
          requestId: '',
          roomType: '',
          roomId:''
        }
        this.listLoading = false
        this.auditResult = []
        this.aitableData = []
        this.solidTableData = []
        this.resTableData = []
        this.resCardTableData = []
        this.netsiteTableData=[]

        this.$refs['contractRule'].clearValidate()
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.query.count=result.cnt||'0';
              this.query.rate=(result.per==null?'--': (result.per*100).toFixed(1)+'%');
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(120px, 60%, right);
  .el-input, .el-select {
    width:60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
  }

  .table-bottom {
    margin-bottom: 15px;
  }

  div.inline {
    border: 1px solid #e7e7e7;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }

  .inline>div {
    width: 200px;
    display: inline-block;
  }

  a.link {
    color: rgba(235, 75, 75, 1);
    font-weight: 550;
  }
</style>
